<template>
  <div class="container">
		<wxc-minibar>
				<div class="header-con" slot="middle" @click="isTopShow = !isTopShow">
						<text class="header-title">合买大厅 · {{title}}</text>
						<div class="history-list-title-num-arrow">
								<image ref="isTopShow" class="history-header-arrow" v-if="!isTopShow" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-down.png" alt="arrow-down"></image>
								<image ref="isTopShow" class="history-header-arrow" v-else src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/in-up.png" alt="arrow-down"></image>
						</div>
				</div>
          <div class="header-font-title" slot="right" v-if="status" @click="goTouzhu">
            <text class="header-font-pr">发起合买</text>
        </div>
		</wxc-minibar>
		<!-- <div class="sort_bar">
			<div class="sort_bar_box">
				<div class="sort_bar_box_item" v-for="(item,index) in orderBy" :key="index +1/3" @click="orderManage(item)">
					<text class="sort_bar_box_item_name"  :class="[currentOrderByName === item.name?active:'']">{{item.name}}</text>
					<image class="sort_bar_box_item_img" v-if="!item.value1&&!item.value2" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/noupnodown.png"></image>
					<image class="sort_bar_box_item_img" v-if="item.value1" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/upnodown.png"></image>
					<image class="sort_bar_box_item_img" v-if="item.value2" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/downnoup.png"></image>
				</div>
			</div>
		</div> -->
  <div class="sort_bar">
			<div class="sort_bar_box">
				<div class="sort_bar_box_item"  @click="isListShow = !isListShow">
					<text class="sort_bar_box_item_name">筛选</text>
					<image class="sort_bar_box_item_img"  src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/shaixuan.png"></image>
				</div>
        	<div class="sort_bar_box_item" v-for="(item,index) in orderBy1.slice(4)" :key="index+1/3"  @click="orderManage(item)">
					<text class="sort_bar_box_item_name" :style="{ 'color': currentOrderByName !== item.name ? '#666' : '#E53935' }">{{item.name}}</text>
				</div>
      
			</div>
	</div>

		<list class="scoller">
			<refresh class="refresh" @refresh="onrefresh" :display="refreshing ? 'show' : 'hide'">
			<rotate></rotate>
			</refresh>
      <cell v-if="chiplists.length" v-for="(item,index) in chiplists" :key="index +1/11" @click="router(item)">
      <div class="lottery_first">
				<div class="lottery_first_box">
					<div class="lottery_first_info">
						<div class="lottery_first_info_fl">
							<div class="nickname" style="width: 200px;">
								<text class="bigtitle">{{formatNickname(item.nickName)}}</text>
							</div>
							<div class="star-list">
								<image v-if="item.rank === '0'"></image>
								<image v-if="item.rank.split('_')[0] === '1'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/12" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_one.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '2'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/13" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_two.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '3'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/14" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_three.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '4'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/15" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_four.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '5'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/16" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_five.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '6'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/17" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_six.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '7'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/18" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_seven.png" style="width:60px;height:60px;margin-left:8px;"></image>
								<image v-if="item.rank.split('_')[0] === '8'" v-for="(num,index) in Number(item.rank.split('_')[1])" :key="index +1/19" src="http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/level_imgs/l_eight.png" style="width:60px;height:60px;margin-left:8px;"></image>
							</div>
						</div>
						<text class="subtitle">{{item.lotteryName}}{{item.issue}}期</text>
					</div>
					<div class="lottery-list-cont">
						<!-- <div class="lottery_content">
							<image class="account-header"   :src="item.avatar || 'http://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/avatarDefault.png'"></image>
						</div> -->
						<div class="lottery-list-right">
                <div class="lottery-list-right-cont">
									<text class="box-text bao-percent">{{(item.buyMoney/item.money *100).toFixed(2)}}%</text>
									<text class="box-text bao-people">参与{{item.spartinCount}}人</text>
                  <div class="bao-wrap">
                    <text class="bao-txt">保{{(item.safeguardMoney/item.money *100).toFixed(2)}}%</text>
                  </div>
								</div>
              	<div class="lottery-list-right-cont">
                    <div class="processbar-wrap">
                      <div class="process-bar" :style="{width:item.buyMoney/item.money *460+'px'}"></div>
                    </div>
								</div>
								<div class="lottery-list-right-cont">
									<text class="box-text all-money">总金额 ￥{{(item.money*1).toFixed(0)}}</text>
									<text class="box-text all-balance">剩余 ￥{{(item.money - item.buyMoney).toFixed(2)}}</text>
								</div>
						</div>
            <div class="lottery-list-right-r">
              <div class="right-btn">
                <text class="right-btntxt">我要认购</text>
              </div>
            </div>
					</div>
				</div>
			</div>
      </cell>
			
	

			<loading v-if="chiplists.length >= 10"  class="loading" @loading="onloading" :display="loadinging ? 'show' : 'hide'">
			<rotate></rotate>
			</loading>
		</list>
      <div v-if="norecord" class="norecord">
          <image class="nodata-img" src="https://zhongcai-test.oss-cn-beijing.aliyuncs.com/hch5/nobuy1.png"></image>
          <text class="nodata-txt">无合买记录</text>
       </div>
      <!-- 合买跟单下拉选择 -->
  
		<wxc-popup popup-color="#fff" :show="isTopShow" @wxcPopupOverlayClicked="isTopShowFn" pos="top" ref="wxcPopup"  height="385" standOut="90px">
			<div class="isSelectOpt">
				<div class="select-type border-top" v-for="(item,index) in btnTitle" :key="index+1/2">
					<div class="popup-btn" v-for="(item1,index1) in item" @click="goActivitylist(item1, index1)" :key="index1+1/2" :class="[ currentType !== item1.value ? 'btn-basis-color' : 'btn-basis-color-active'] ">
						<text class="popup-btn-color" :style="{ 'color': currentType !== item1.value ? '#666' : '#fff' }">{{ item1.title }}</text>
					</div>
				</div>
			</div>
  	</wxc-popup>
  	<wxc-popup popup-color="#fff" top="200" :show="isListShow" @wxcPopupOverlayClicked="isListShowFn" pos="top"   height="385" standOut="170px">
			<div class="isSelectList">
					<div class="list-item" v-for="(item,index) in orderBy1.slice(0,4)" :key="index+1/2"  @click="orderManage(item)">
						<text class="list-itemtxt" :style="{ 'color': currentOrderByName !== item.name ? '#666' : '#E53935' }">{{ item.name }}</text>
					</div>
			</div>
  	</wxc-popup>
   
    <loading-big v-if="loadingshow"></loading-big>
   </div>
</template>

<script>
const modal = weex.requireModule("modal");
const navigator = weex.requireModule("navigator");
const sxglobalEvent = weex.requireModule("globalEvent");

import { postResponsesToken } from "@/api.js";
import { serialize, getBaseUrl, jsonAnalysis } from "@/utils/index.js";
import { recentBuyGroup } from "@/js/global/index_data"
import { WxcSearchbar, Utils} from "weex-ui";
import WxcPopup from "../../components/modules/wxc-popup";
import WxcMinibar from "@/components/modules/wxc-minibar/index.js";
import rotate from "@/components/modules/rotate";
import WxcLoadingsp from "../../components/modules/loading";
import loadingBig from "@/components/modules/loading-big";

export default {
  components: {
    WxcMinibar,
    WxcSearchbar,
    WxcPopup,
    WxcLoadingsp,
    rotate,
    loadingBig
  },
  data: () => ({
    norecord: false,
    baseurl:'',
    status:false,
    active:'active',
    loadinging: false,
    refreshing: false,
    loadingshow: false,
    value: "",
    isTopShow: false,
    isListShow:false,
    currentType: 0,
    title: "全部",
    href:'',
    type:'',
    btnTitle:[
      [{
      title: "全部",
        name: "all",
        value: 0
    }],
    [
        
      {
        title: "双色球",
        name: "unionLotto",
        value: 1,
        href: "union-lotto",
	     type: 'DLT',
      },
      {
        title: "超级大乐透",
        name: "superlotto",
        value: 2,
        href: "super-lotto",
	    	type: 'SSQ',
      },
      {
        title: "福彩3D",
        name: "welfare3D",
        value: 3,
         href: "pai-three",
	     type: "welfareLottery",
      },
      {
        title: "排列3",
        name: "paiThree",
        value: 4,
        type: 'PL3',
	     href: "pai-three",
      },
      {
        title: "排列5",
        name: "paiFive",
        value: 5,
         type: 'PL5',
	     href: "pai-five",
      }
    ],
    ],
   
    chiplists: [],
    pageSize: 10,
    currentPage: 1,
    currentOrderByName: "进度排序",
    orderBy: [
      {
        name: "进度排序",
        value1: true, //正序
        value2: false //倒序
      },
      {
        name: "金额排序",
        value1: false,
        value2: false
      },
      {
        name: "战绩排序",
        value1: false,
        value2: false
      }
    ],
     orderBy1: [
      {
        name: "进度最高",
        value1: true, //正序
      },
      {
        name: "进度最低",
        value1: false
      },
      {
        name: "金额最高",
        value1: false,
     
      },
       {
        name: "金额最低",
        value1: false,
      },{
         name: "最热",
        value1: false,
      },{
         name: "战绩",
        value1: false,
      }
    ],
    contentStyle: {},
   
  }),
  methods: {
    goTouzhu(){
      if (this.href === "") {
				return;
			}

			let hash = {
				pageType: this.href,
				typeName: this.type,
				type: !!this.type ? this.type : ""
			}
			navigator.push({
				url: this.baseurl + `views/lottery/lottery.js?` + serialize(hash),
				animated: "true"
			});
     
    },
    formatNickname(name){
		return !name || name.length <= 4 ? name : name.slice(0,4)+'...'

    },
    router(item) {
      let hash = {
        data: JSON.stringify(item)
      };
      
      navigator.push({
        url: this.baseurl + `views/guess/chipDetail.js?` + serialize(hash),
        animated: "true"
      });
    },
    onloading(event) {
      this.loadinging = true;
      this.currentPage++;
      setTimeout(() => {
        this.getChipLists();
        this.loadinging = false;
      }, 2000);
    },
    onrefresh(event) {
      this.refreshing = true;
   
      setTimeout(() => {
        this.chiplists = [];
        this.currentPage = 1;
        this.getChipLists();
        this.refreshing = false;
      }, 2000);
    },
    lotteryName(typeNum) {
      return this.btnTitle.filter(x => x.value === Number(typeNum))[0].title;
    },
    isTopShowFn() {
      this.isTopShow = false;
    },
    isListShowFn(){
       this.isListShow = false;
    },
    async orderManage(item) {
      this.isListShow = false;
      // if (this.currentOrderByName === item.name) {
      //   let allreadyc = this.orderBy1.filter(x => x.name === item.name)[0];
      //   allreadyc.value1 = !allreadyc.value1;
      //   // allreadyc.value2 = !allreadyc.value2;
      // } else {
        this.currentOrderByName = item.name;
        this.orderBy1.map(x => {
          x.value1 = false;
          // x.value2 = false;
        });
        let allreadyc = this.orderBy1.filter(x => x.name === item.name)[0];
        allreadyc.value1 = true;
    //  }
      this.chiplists = await this.orderData(this.chiplists);

    },
    //合买跟单玩法 切换
    goActivitylist(item, index) {
        this.type=item.type;//用于区分跳转彩种的页面
        this.href=item.href;
        this.status=item.value!==0?true:false;//全部类型就没有发起合买的入口

      // 标题显示
      this.currentPage = 1;
      this.currentOrderByName = "进度排序";
      this.orderBy.map(x => {
        x.value1 = false;
        x.value2 = false;
      });
      this.orderBy[0].value1 = true;
      this.title = item.title;
      this.currentType = item.value;
      this.$refs.wxcPopup.hide();
      this.chiplists = [];
      this.getChipLists();
      // 标记索引
    },
    async getChipLists() {
      try {
        let reqBody = {
          parament: this.title,
          size: this.pageSize,
          current: this.currentPage,
          type:1
        };
		
        let req = await postResponsesToken('order/bet/buyTogether', reqBody);
        if (req.data) {
          if (req.data.length === 0) {
             this.norecord=true;
            if (this.currentPage > 0) {
              this.currentPage--;
            }
            return;
          }
          let rankF = req.data.map(x => {
            if (x.rank === "0") {
              x.rank = "0_0";
            }
          });
           this.norecord=false;
          this.chiplists = this.chiplists.concat(this.orderData(req.data));
        } else {
          modal.toast({
            message: "发生错误"
          });
        }
      } catch (e) {
        modal.toast({
          message: JSON.stringify(e)
        });
      }
    },
    orderData(data) {
    
      let behindList = [];
     
      if (this.orderBy1[0].value1) {
     
         //进度最高倒序
        behindList = data.sort((a, b) => {
          return Number(b.buyMoney/b.money) - Number(a.buyMoney/a.money);
        });
      }
      if (this.orderBy1[1].value1) {
          //进度最低，正序
        behindList = data.sort((a, b) => {
          // return Number(a.schedule) - Number(b.schedule);
           return Number(a.buyMoney/a.money) - Number(b.buyMoney/b.money);
        });
       
       
      }
      if (this.orderBy1[2].value1) {
          //金额最高倒序
        behindList = data.sort((a, b) => {
          return Number(b.money) - Number(a.money);
        });
       
      
      }
      if (this.orderBy1[3].value1) {
          //金额最低正序
        behindList = data.sort((a, b) => {
          return Number(a.money) - Number(b.money);
        });
      
      }
      // if (this.orderBy[4].value1) {
      //   //战绩正序
      //   behindList = data.sort((a, b) => {
      //     let ranka = (Number(a.rank.split('_')[0])-1)*3 + Number(a.rank.split('_')[1])
      //     let rankb = (Number(b.rank.split('_')[0])-1)*3 + Number(b.rank.split('_')[1])
      //     return ranka- rankb;
      //   });
      // }
      if (this.orderBy1[4].value1) {
          //最热根据人数排序，倒序
        behindList = data.sort((a, b) => {
          return Number(b.spartinCount) - Number(a.spartinCount);
        });
      
      }
      if (this.orderBy1[5].value1) {
        //战绩倒序，最高的在前面
        behindList = data.sort((a, b) => {
          let ranka = (Number(a.rank.split('_')[0])-1)*3 + Number(a.rank.split('_')[1])
          let rankb = (Number(b.rank.split('_')[0])-1)*3 + Number(b.rank.split('_')[1])
          return rankb- ranka;
        });
      }
      //最热根据参与人数
      return behindList;
    }
  },
  created() {
    this.baseurl = getBaseUrl(weex.config.bundleUrl, true);
    const tabPageHeight = Utils.env.getPageHeight();
    this.contentStyle = {
      height: tabPageHeight + 90 + "px"
    };
  },
  mounted() {
   
    this.getChipLists();
   
  },
  computed: {}
};
</script>

<style scoped>
.nodata-txt{
  color:#999999;
  font-size:32px;
  margin-top:40px;

}
.nodata-img{
  width:400px;
  height:400px;
}
.norecord {
    padding-top: 158px; 
    flex-direction: column;
   
    align-items: center;
}
.lottery-list-right-r{
  justify-content: center;
  height:169px;
}
.right-btn{
  width:150px;
  height:54px;
  background-color: #E53935;
  justify-content: center;
  border-radius:4px;
}
.right-btntxt{
  font-size:28px;
  color:#fff;
  text-align: center;

}
.list-itemtxt{
  color:#676F73;
  font-size: 28px;

}
.list-item{
  padding-left:32px;
  height:96px;
  border-bottom-color: #DCDCDC;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  justify-content: center;
}
.header-font-pr {
  font-size: 30px;
  color: #333;
}
.loading{
    width: 750px;
    display: flex;
    align-items: center;
   
}

.lottery_first {
  background-color: #ffffff;
  margin-bottom: 24px;
}

.lottery_first_box {
  width: 750px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
  height: 272px;
}
.lottery_first_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, 0.1);
  align-items: center;
  box-sizing: border-box;
  height: 93px;
}
.lottery_first_info_fl {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 400px;
}
.bigtitle {
  font-size: 32px;
  font-family: PingFangSC-Medium;
  color: #333333;
  margin-right: 40px;
}
.subtitle {
  font-size: 24px;
  color: #E53935;
  border-radius: 18px;
  border-color: #E53935;
  border-style: solid;
  border-width: 1px;
  padding-left:15px;
  padding-right:15px;
}

.lottery_content {
  align-items: center;
  display: flex;
  align-items: center;
  width: 96px;
}
.box-text {
  font-size: 28px;
  /* margin-top:24px; */
  height: 80px;
  line-height: 80px;
}
.bao-wrap{
  background-color: #FFE4E3 ;
  border-width: 1px;
  border-style: solid;
  border-color: #E53935;
  padding-left:5px;
  padding-right:5px;
}
.processbar-wrap{
  width:460px;
  background-color: #EEEEEE;
  height:8px;
  border-radius: 4px;
}
.process-bar{
 
  background-color: #E53935;
  height:8px;
  border-radius: 4px;
}
.bao-txt{
  color:#E53935;
  font-size: 24px;
}
.all-money{
  width:250px;
  padding-right:20px;
}
.all-balance{
  
}
.bGroup {
  padding-top: 10px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.border-top{
   border-top-width: 1px;
  border-top-style: solid;
  border-top-color: #DCDCDC;
}
.account-header {
  width: 96px;
  height: 96px;
  border-radius: 48px;
}
.lottery_first_ball {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}

/* sort_bar */
.sort_bar_box_item_img {
  height: 28px;
  width: 28px;
  align-self: center;
  margin-left: 8px;
}
.sort_bar_box_item_name {
  font-size: 30px;
  color: #444;
}

.sort_bar {
  
}
.sort_bar_box_item {
  font-size: 25px;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}

.header-title {
  font-size: 34px;
  color: #333333;
  font-family: PingFangSC-Medium;
}

.header-img {
  position: absolute;
  left: 32px;
  top: 34px;
  margin-left: 0;
}

.discover_item_icon {
  font-family: iconfttf;
  font-size: 12px;
  color: #333333;
}

.active {
  color: #e70d0d;
}
.star-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.lottery-list-cont {
  height: 169px;
  display: flex;
  align-items: flex-start;
  flex-direction: row;
  justify-content: space-between;
  border-bottom-style: solid;
  
  box-sizing: border-box;
}



.lottery-list-right-cont {
  display: flex;
  flex: 1;
  align-items: center;
  /* height: 96px; */
  justify-content: flex-start;
}

.box-text-title {
  margin-bottom: 6px;
  font-size: 29px;
  color: #666666;
}

.guess-input {
  width: 750px;
  height: 120px;
  background-color: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.search-img {
  position: absolute;
  left: 48px;
  top: 41px;
  z-index: 999;
}
.guess-input-type {
  background-color: #ffffff;
  border-radius: 4px;
  width: 686px;
  height: 72px;
  padding-left: 70px;
  box-sizing: border-box;
  font-size: 28px;
  color: #999;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Regular;
}

.container {
  background-color: rgb(242, 243, 244);
  width: 750px;
}

.history-list-title-num-arrow {
  flex-direction: row;
  justify-content: flex-end;
  margin-left: 10px;
}

.show {
  transform: rotate(-180deg);
}

.popup-btn {
  width: 200px;
  height: 72px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-right: 21px;
  margin-left: 21px;
}





.border-bottom {
  border-bottom-color: #f1f1f1;
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.scoller {
  position: fixed;
 width:750px;
  top: 170px;
 bottom:0;
 right:0;
  left: 0px;
  
}
.loading {
  width: 750;
  display: -ms-flex;
  display: -webkit-flex;
  display: flex;
  -ms-flex-align: center;
  -webkit-align-items: center;
  -webkit-box-align: center;
  align-items: center;
}
.refresh {
  width: 750;
 
  display: flex;
 
  align-items: center;
}
.indicator-text {
  color: #888888;
  font-size: 28px;
  text-align: center;
}
.indicator {
  margin-top: 16px;
  height: 40px;
  width: 40px;
  color: #888888;
}
.lottery_first {
  width:750px;
  background-color: #ffffff;
  margin-bottom: 24px;
}
.lottery_first_box {
  width: 750px;
  padding-left: 32px;
  padding-right: 32px;
  box-sizing: border-box;
  height: 272px;
}
.lottery_first_info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  border-bottom-style: solid;
  border-bottom-width: 1px;
  border-bottom-color: rgba(0, 0, 0, 0.1);
  align-items: center;
  box-sizing: border-box;
  height: 93px;
}
.lottery_first_info_fl {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex: 400px;
}


.lottery_content {
  align-items: center;
  display: flex;
  align-items: center;
  width: 96px;
}
.box-text {
  font-size: 26px;
  color:#333333;
}
.bao-percent{
  width:120px;
  padding-right:10px;
}
.bao-people{
  width:220px;
  padding-right:20px;
}
.bGroup {
  padding-top: 10px;
  padding-left: 16px;
  padding-right: 16px;
  padding-bottom: 10px;
  display: flex;
  justify-content: space-between;
  flex-direction: row;
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
.account-header {
  width: 96px;
  height: 96px;
  border-radius: 48px;
}
.lottery_first_ball {
  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.1);
}
/* sort_bar */
.sort_bar_box_item_img {
  height: 24px;
  width: 20px;
  align-self: center;
  margin-left: 8px;
}
.sort_bar_box_item_name {
  font-size: 32px;
  color: #666666;
}

.sort_bar_box {
  flex-direction: row;
  background-color: #F5F5F5;
  justify-content: space-between;
  height:80px;
  align-items: center;

}

.sort_bar_box_item {
  font-size: 25px;
  display: flex;
  flex: 1;
  flex-direction: row;
  justify-content: center;
  align-items: center;
}
.header {
  width: 750px;
  height: 90px;
  background-color: #fff;
  display: flex;
  justify-content: center;
  position: relative;
}

.header-img {
  position: absolute;
  left: 32px;
  top: 34px;
  margin-left: 0;
}
.discover_item_icon {
  font-family: iconfttf;
  font-size: 12px;
  color: #333333;
}
.active {
  color: #e70d0d;
}
.star-list {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: center;
}

.lottery-list-right {
  width: 460px;
  display: flex;
  flex-direction:column;
}
.lottery-list-right-cont {
  
  flex: 1;
  flex-direction: row;
 
}
.box-text-title {
  margin-bottom: 6px;
  font-size: 29px;
  color: #666666;
}
.guess-input {
  width: 750px;
  height: 120px;
  background-color: rgb(245, 245, 245);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.search-img {
  position: absolute;
  left: 48px;
  top: 41px;
  z-index: 999;
}
.guess-input-type {
  background-color: #ffffff;
  border-radius: 4px;
  width: 686px;
  height: 72px;
  padding-left: 70px;
  box-sizing: border-box;
  font-size: 28px;
  color: #999;
  display: flex;
  align-items: center;
  font-family: PingFangSC-Regular;
}
.container {
  background-color: rgb(242, 243, 244);
  width: 750px;
}
.header-con {
  flex: 1;
  height: 90px;
  display: flex;
  justify-content: center;
  position: relative;
  align-items: center;
  flex-direction: row;
}

.history-header-arrow {
  width:40px;
  height:40px;
}
.history-list-title-num-arrow {
  flex-direction: row;
  justify-content: flex-end;
  margin-left: 10px;
}
.show {
  transform: rotate(-180deg);
}
.isSelectOpt {

  background-color: #fff;
}
.select-type {
  flex-direction: row;
  /* justify-content: space-between; */
  flex-wrap: wrap;
   padding-top: 20px;
   padding-bottom:20px;
  /* margin-right: 12px;
  margin-left: 12px;  */
}
.popup-btn {
  width: 200px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
  margin-bottom:12px;
  margin-right: 21px;
  margin-left: 21px;
  background-color: #F4F4F4;
   border-radius: 4px;
}
.popup-btn-color {
  font-family: PingFangSC-Medium;
  font-size: 30px;
  text-align: center;
  color:#666666;
}
.btn-basis-color {
  background-color: #F4F4F4;
  
}
.btn-basis-color-active {
  background-color: #E53935;
  
}
.process {
  height: 80px;
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
}


</style>